<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>订单详情</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/mrs.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css{$JSDEBUG}"/>
    <script type="text/javascript" src="__FONT__/js/jquery-1.9.1.min.js"></script>
</head>
<body style="background:#f7f7f9;">
	<include file="Public/customHeader" title="订单详情" url="{:U('Beautician/beauticianOrder')}"/>
 	<section class="mrs_sec">
       <div class="mrs_workin <eq name='order.status' value='5' >quxiao</eq>">
         <h1>订单编号：<span>{$order.order_number}</span><label><eq name="order.status" value="1" >已付款</eq>
         <eq name="order.status" value="5" >客户取消</eq>
         </label></h1>
         <dd><label></label><label></label></dd>
         <ul id="orderProgress">
           <li class="ai">
             <span>{$order.created|date='n月d日',###}</span>
             <i class="ac"></i>
             <span>{$order.created|date='H:i',###}</span>
             <span>已下单</span>
           </li>
           
           <eq name="order.status" value="5" >
           <li></li>
           <li>
             <span>{$order.order_time|date='n月d日',###}</span>
             <i></i>
             <span>{$order.order_time|date='H:i',###}</span>
             <span>已取消</span>
           </li>
           </eq>
           
           <eq name="order.status" value="3" >
           <li class="ai">
             <span>{$order.use_time|date='n月d日',###}</span>
             <i class="ac"></i>
             <span>{$order.use_time|date='H:i',###}</span>
             <span>服务中</span>
           </li>
           <li>
             <span>&nbsp;</span>
             <i></i>
             <span>&nbsp;</span>
             <span>已完成</span>
           </li>
           </eq>
           
           <eq name="order.status" value="4">
           <li class="ai">
             <span>{$order.use_time|date='n月d日',###}</span>
             <i class="ac"></i>
             <span>{$order.use_time|date='H:i',###}</span>
             <span>服务中</span>
           </li>
           <li class="ai">
             <span>{$order.use_end_time|date='n月d日',###}</span>
             <i class="ac"></i>
             <span>{$order.use_end_time|date='H:i',###}</span>
             <span>已完成</span>
           </li>
           </eq>
           
           <eq name="order.status" value="1">
           <li>
             <span>&nbsp;</span>
             <i></i>
             <span>&nbsp;</span>
             <span>服务中</span>
           </li>
           <li >
             <span>&nbsp;</span>
             <i ></i>
             <span>&nbsp;</span>
             <span>已完成</span>
           </li>
           </eq>
         </ul>
       </div>
       <div class="mrs_order">
              <div class="mrs_self">
                 <div class="xiangmu">
                 	<if condition="$service['order_banner']">
                   		<img src="__UPLOADS__/Service/OrderBanner/{$service.order_banner}" >
                 	<else />
                 	<img src="__FONT__/images/pinjia_03.jpg">
                 	</if>
                 </div>
                 <dd>
                   <strong><span>{$order.order_time|date='Y-m-d H:i',###}</span></strong>
                   <strong><span>{$order.service_name}（到店）</span></strong>
                   <strong><label>￥{$order.price}</label><label>{$order.service_time}分钟</label></strong>
                 </dd>
              </div>
              <div class="mrs_infor">
                   <strong><b>地址：</b><span>{$order.service_address}</span></strong>
                   <strong><b>姓名：</b><span>{$user.username}</span><label>{$user.mobile}</label></strong>
              </div>     
              <ul class="clear">
                 <li><a href="tel:{$user.mobile}">拨打</a></li>
                 <li><a href="http://api.map.baidu.com/marker?location={$order.beauty.latitude},{$order.beauty.longitude}&title={$order.service_address}&content={$order.service_address}&output=html">导航</a></li>
              </ul>
       </div> 
       <div class="timeway">
         <dd>下单时间：<span>{$order.created|date='Y-m-d H:i',###}</span></dd>
         <dd>支付方式：<span>微信支付</span></dd>
       </div>
       <div class="mrs_do mrs_wok <eq name='order.status' value='4'>finished</eq><eq name='order.status' value='3'>server</eq><eq name='order.status' value='1'>server</eq><eq name='order.status' value='5'>server</eq>">
          <ul>
          	<eq name="order.status" value="5" >
            <li><a href="javascript:;" class="mrs_btn channel servise">删除订单</a></li>
            </eq>
          	<eq name="order.status" value="3" >
            <li>
            <if condition="!$order['check_complete']"><a href="javascript:;" class="mrs_btn servise">
            <else /><a href="javascript:;" class="mrs_btn finis completeUse"></if>
            <if condition="!$order['check_complete']">服务中<else />完成</if></a></li>
            <li style="display: none;"><a href="{:U('Comments/replyComment/id/'.$order['id'])}" class="mrs_btn finis">查看评论</a></li>
            </eq>
            <eq name="order.status" value="4" >
            <li><a href="{:U('Comments/replyComment/id/'.$order['id'])}" class="mrs_btn finis">查看评论</a></li>
            </eq>
            <eq name="order.status" value="1" >
<!--             <li><a href="javascript:;" class="mrs_btn workin">取消订单</a></li> -->
            <li><a href="javascript:;" class="mrs_btn start">开始</a></li>
            <li style="display: none;"><a href="javascript:;" class="mrs_btn channel servise completeUse">服务中</a></li>
            </eq>
          </ul>
       </div>
	</section>
	<script>
	var pad = function(tbl) {
	    return function(num, n){
	        return (0 >= (n - ''+num.length)) ? num : (tbl[n] || (tbl[n] = Array(n + 1).join(0)))+num;
	}    
	}([]);
	$(function () {
		var orderId = '{$order.id}', startUse, completeUse, timer = '{$timer}';
		
		if (timer) {
			setTimeout(function () {
				var completBtn = $('.mrs_do').find('ul li:last');
				completBtn.find('a').removeClass('servise').addClass('mrs_btn').addClass('completeUse')
				.addClass('finis').text('完成');
				completeUseFun();
			}, timer);
		}
		
    	function startUseFun() {
    		$('.start').click(function (e) {
        		if (!confirm('您确定开始该订单')) {
        			return false;
        		}
        		
        		var _this = $(this),
        			wrap = $(_this).parents('div.boxing'),
        			id = $(wrap).attr('data-id');
        		
        		if (startUse && startUse.state() == 'pending') {
        			return false;
        		}
        		
        		startUse = $.ajax({
        			url: '{:U("/Beautician/startUse")}',
        			data:{id: orderId},
        			dataType: 'json',
        			success: function (result) {
    					if (result.status) {
    						 $(".mrs_workin li").eq(1).addClass('ai');
    						 $(".mrs_workin li").eq(1).children('i').addClass('ac');
    						 
    						$('.mrs_wok').addClass('server');
    						 
    						var completeElem = $('#orderProgress li').eq(1),
    							objD, str, MM, dd;
    						if (result.complete) {
    							objD = new Date(parseInt(order.order_time) * 1000);
    						} else {
    							objD = new Date();
    						}
    						
    					   	MM = objD.getMonth()+1;  
    					  	dd = objD.getDate();  
    						
    					    yue = MM + "月" + dd + "日";
    					    shijian = objD.getHours() +':' + objD.getMinutes();
    					    
    						completeElem.find('span').eq(0).text(yue);
    						completeElem.find('span').eq(1).text(shijian);
    						completeElem.addClass('ai');
    						completeElem.find('i').addClass('ac');
    						
    						var currentLi = $('.start').parents('li');
    			    		var next = currentLi.next();
    			    		currentLi.hide();
    			    		next.show();
    			    		currentLi.remove();
    			    		
    			    		if (result.complete) {
    			    			next.find('a').removeClass('servise')
    			    				.addClass('finish')
    			    				.addClass('mrs_btn')
    			    				.text('完成');
    			    			completeUseFun();
    			    		} else {
    				    		setTimeout(function () {
    				    			var completeElem = $(".mrs_workin li").eq(2);
    				    			completeElem.addClass('ai').find('i').addClass('ac');
    				    			next.find('a').addClass('mrs_btn')
    				    				.addClass('finished')
    				    				.removeClass('channel')
    				    				.removeClass('servise').text('完成');
    				    			completeUseFun();
    				    		}, result.time);
    			    		}
    					} else {
    						alert(result.message);
    						return false;
    					}
    				},
        			error: function () {
        				alert('请求中断，稍候再试');
        			}
        		});
        		
        		return false;
        	});
    	}
    	
    	function completeUseFun() {
    		$('.completeUse').click(function (e) {
        		if (!confirm('您确定该订单已完成')) {
        			return false;
        		}
        		
        		var _this = $(this),
        			wrap = $(_this).parents('div.boxing'),
        			id = $(wrap).attr('data-id');
        		
        		if (completeUse && completeUse.state() == 'pending') {
        			return false;
        		}
        		
        		completeUse = $.ajax({
        			url: '{:U("/Beautician/completeUse")}',
        			data:{id: orderId},
        			dataType: 'json',
        			success: function (result) {
    					if (result.status) {
    						var currentLi = _this.parents('li');
    						currentLi.next().show();
    						currentLi.remove()
    						
    						var completeElem = $('#orderProgress li').eq(2);
    						
    						objD = new Date();
    						var str;  
    					    var MM = objD.getMonth()+1;  
    					    var dd = objD.getDate();  
    						
    					    yue = MM + "月" + dd + "日";
    					    shijian = objD.getHours() +':' + objD.getMinutes();
    					    
    						completeElem.find('span').eq(0).text(yue);
    						completeElem.find('span').eq(1).text(shijian);
    						completeElem.addClass('ai');
    						completeElem.find('i').addClass('ac');
    					} else {
    						alert(result.message);
    						return false;
    					}
    				},
        			error: function () {
        				alert('请求中断，稍候再试');
        			}
        		});
        		return false;
        	});
    	}
    	startUseFun();
    	completeUseFun();
	});
	</script>
</body>
</html>